import React from 'react';
import { Table, Button, Input } from 'antd';
import styles from './BranchManagement.module.css';

const { Search } = Input;

const data = [
  {
    key: '1',
    number: '1',
    name: '贺兰1店',
    area: '贺兰',
    address: '贺兰县银河广场3层301',
    manager: '张三',
    phone: '18998987878',
  },
  // 添加更多数据...
];

const columns = [
  {
    title: '序号',
    dataIndex: 'number',
    key: 'number',
    align: 'center',
  },
  {
    title: '店铺名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '所属区',
    dataIndex: 'area',
    key: 'area',
    align: 'center',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    align: 'center',
  },
  {
    title: '店长',
    dataIndex: 'manager',
    key: 'manager',
    align: 'center',
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    render: () => (
      <>
        <a href="#">编辑</a> <a href="#">查看</a> <a href="#">删除</a>
      </>
    ),
  },
];

export default function BranchManagement() {
  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.location}>当前位置：分店管理</div>
        <div className={styles.controls}>
          <Button type="primary" className={styles.addButton}>新增</Button>
          <Search placeholder="请输入店铺名称" style={{ width: 200 }} />
        </div>
      </div>
      <Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
    </div>
  );
}
